<template>
  <div class="space">
    <transition name="left">
      <space-left class="panel-left"
                  v-if="panelShow"></space-left>
    </transition>

    <div class="panel-right">
      <transition name="right">
        <space-right v-if="panelShow"
                     class="space-right"></space-right>
      </transition>

      <widget class="widget"
              :class="{'moveToRight':moveToRight,'backToleft':backToleft}"></widget>
    </div>
    <condition class="condition"
               :class="{'moveToLeft':moveToLeft,'backToRight':backToRight}"></condition>
    <Swiper class="swiper"></Swiper>
    <space-detail class="underground-space"></space-detail>
    <!-- <floor-detail v-if='floorShow'
    class='floor-detail'></floor-detail>-->
  </div>
</template>
<script>
import Swiper from "../components/floor/swiper";
import spaceLeft from "../components/space/space-left.vue";
import spaceRight from "../components/space/space-right.vue";
import spaceDetail from "../components/space/space-detail.vue";
// import floorDetail from '../components/space/floor-detail.vue'
import condition from "../components/space/condition.vue";
import widget from "../components/widget/widget.vue";
import Bus from "../components/utils/bus.js";
export default {
  name: "space",
  data () {
    return {
      mapdata: {},
      panelShow: true,
      nowOpne: false,
      planOpen: false,
      moveToRight: false,
      backToleft: true,
      moveToLeft: false,
      backToRight: true,
      // isShow: false,
      // floorShow: false,
    };
  },
  components: {
    spaceLeft,
    spaceRight,
    widget,
    Swiper,
    spaceDetail,
    condition
    // floorDetail,
    // popupTemplate
  },
  mounted () {
    Bus.$on("toggle", () => {
      this.panelShow = !this.panelShow;
      this.moveToRight = !this.moveToRight;
      this.backToleft = !this.backToleft;
      this.moveToLeft = !this.moveToLeft;
      this.backToRight = !this.backToRight;
    });
  },
  methods: {}
};
</script>

<style lang="scss">
$precent: 100vw / 1920;
@keyframes left {
  100% {
    transform: translateX(-500 * $precent);
  }
}
@keyframes right {
  100% {
    transform: translateX(500 * $precent);
  }
}
@keyframes backLeft {
  0% {
    transform: translateX(-500 * $precent);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes backRight {
  0% {
    transform: translateX(500 * $precent);
  }
  100% {
    transform: translateX(0);
  }
}
// 向右下角移动
.moveToRight {
  top: 710 * $precent;
  right: -9 * $precent;
  transition: 1s;
}
.backToleft {
  top: 625 * $precent;
  right: 465 * $precent;
  transition: 1s;
}
// 向左下角移动
.moveToLeft {
  bottom: 20 * $precent;
  left: 10 * $precent;
  transition: 1s;
}
.backToRight {
  bottom: 105 * $precent;
  left: 490 * $precent;
  transition: 1s;
}

.left-enter-active {
  transition: opacity 0.5s;
  animation: backLeft 1s;
}
.left-enter {
  opacity: 0;
}
.left-leave-active {
  transition: opacity 0.5s;
  animation: left 1s;
}

.right-enter-active {
  transition: opacity 0.5s;
  animation: backRight 1s;
}
.right-enter {
  opacity: 0;
}
.right-leave-active {
  transition: opacity 0.5s;
  animation: right 1s;
}
.space {
  z-index: 10;
  text-align: center;
  position: relative;
  transition: 2s;

  .panel-right {
    position: fixed;
    top: 76 * $precent;
    right: 20 * $precent;
    z-index: 10;

    .space-right {
      width: 443 * $precent;
      float: right;
    }
    .widget {
      position: absolute;
      width: 55 * $precent;
    }
  }
  .condition {
    position: fixed;
  }
  .underground-space {
    // border: 1*$precent solid red;
    z-index: 99;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
  }
  .floor-detail {
    z-index: 99;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
  }
  .swiper {
    position: fixed;
    bottom: 22 * $precent;
    z-index: 1;
    overflow: hidden;
  }
}
</style>
